<template>
    <Button class="tnxel-toolbar-item"
        :class="{active: item.active}"
        type="default"
        link
        :icon="item.icon"
        :tooltip="item.caption" tooltip-placement="bottom"
        :disabled="item.disabled"
        :key="item.disabled"
        :disabled-tip="false"
        :size="size"
        @click="item.click"/>
</template>

<script>
import ToolBarItem from './ToolBarItem.js';
import Button from '../button/Button.vue';

export default {
    name: 'TnxelToolBarItem',
    components: {Button},
    props: {
        item: {
            type: ToolBarItem,
            required: true,
        },
        size: {
            type: String,
            validator: value => {
                return ['small', 'default', 'large'].includes(value);
            },
            default: 'default',
        },
    },
    data() {
        return {
            model: {},
        };
    },
    methods: {}
}
</script>

<style>
.tnxel-toolbar-item.active {
    border: 1px solid var(--el-border-color);
    background-color: var(--el-border-color);
}

.tnxel-toolbar-item.active:hover {
    border-color: var(--el-border-color) !important;
}
</style>
